//ajax jquery 
//联动功能
var allTypes = [
    {
        "name": "桃子",
        "belong": "水果类"
    },
    {
        "name": "李子",
        "belong": "水果类"
    },
    {
        "name": "栗子",
        "belong": "水果类"
    },
    {
        "name": "葡萄",
        "belong": "水果类"
    },
    {
        "name": "蛋糕",
        "belong": "甜品类"
    },
    {
        "name": "小蛋糕",
        "belong": "甜品类"
    },
    {
        "name": "生日蛋糕",
        "belong": "甜品类"
    },
    {
        "name": "红茶",
        "belong": "饮料类"
    },
    {
        "name": "绿茶",
        "belong": "饮料类"
    },
    {
        "name": "白开水",
        "belong": "饮料类"
    },
    {
        "name": "牛肉",
        "belong": "肉类"
    },
    {
        "name": "羊肉",
        "belong": "肉类"
    },
    {
        "name": "鸡肉",
        "belong": "肉类"
    }
]


var allPerson = [
    {
        "character": "有目标",
        "type": "普通人"
    },
    {
        "character": "没行动",
        "type": "普通人"
    },
    {
        "character": "有目标有行动",
        "type": "学霸"
    },
    {
        "character": "目标没有达成，深入思考，反思，修改目标继续坚持",
        "type": "学霸"
    },
    {
        "character": "没有目标，没有行动",
        "type": "学渣"
    },
    {
        "character": "吃喝玩乐，随波逐流",
        "type": "学渣"
    },
    {
        "character": "吃苦耐劳",
        "type": "体育生"
    },
    {
        "character": "坚持不放弃",
        "type": "体育生"
    }
];
$(function () {
    $(".btn").select(function () {
        $("#ajax").load("https://api.apiopen.top/getJoke?page=1&count=2&type=video");
    }),

        //怎样获取 json文件呢？
        //过滤 点击水果类的 就取 JSON文件里找水果类的然后全部显示再 option 列表里
        $("#type").change(function () {
            //这个change 捕获的是什么？
            // x 是获取当前点击的这个值，value
            var x = $(this).val();

            //过滤出 与 x 相等的值 参数 a 接收allTypes 数组里面的值，即一个对象
            //如：{"name": "桃子","belong": "水果类"}
            // 然后在函数内部，可以像使用普通变量一样，使用参数；

            //过滤出所有 肉类的name
            var filteredData = allTypes.filter(function (a) {
                if (a.belong === x) {
                    return true;
                } else {
                    return false;
                }

            });
            //filteredData 现在得到的是一个数组；
            console.log(filteredData);
            //然后把数组填充到 select option 里面
            var text = "";
            text += '<div><select>';
            for (var i = 0; i < filteredData.length; i++) {
                text += '<option>' + filteredData[i].name + '</option>';
            }
            text += '</div></select>';
            $("#food").html(text);
            console.log(text);


        }),

        $("#person").change(function () {
            var p = $(this).val();
            var filteredPersonData = allPerson.filter(function (one) {
                //one 参数接收的是allPerson数组里面的数据；第一条数据，第二条数据，接收的是对象
                if (one.type === p) {
                    return true;
                } else {
                    return false;
                }

            });
            var textP = "";
            textP += "<select>";
            for (var i = 0; i < filteredPersonData.length; i++) {
                textP += '<option>' + filteredPersonData[i].character + '</option>';
            }
            textP += '</select>';
            $("#personCharacter").html(textP);


        });


});